<template>
    <div class="points">
        <div class="points_top">
            <span>位置序列</span>
            <span @click="addPosition()" title="添加点" @mouseenter="hoverIndex = -1"
                @mouseleave="hoverIndex = -2"><es-icon :name="'tianjia'" :color="hoverIndex === -1 ? '#fff' : '#575B66'"
                    :size="13" /></span>
        </div>
        <div class="points_list">
            <div class="list_top">{{ '序号' }}</div>
            <div v-if="positionType === 'duFenMiao'">
                <div class="list_content" v-for="(item, index) in duFenMiaoPositions" :key="index">
                    <div class="content_left ">{{ index + 1 }}</div>
                    <div class="content_center">
                        <div class="content_center_dufenmiao">
                            <input @blur="update1($event, positionRef, index, 0, 0)"
                                @keydown.enter="update1($event, positionRef, index, 0, 0)" type="number"
                                class="input_number" name="" id="" :value="item[0][0]" step="0.0000001"
                                placeholder="请输入" />°
                            <input @blur="update1($event, positionRef, index, 0, 1)"
                                @keydown.enter="update1($event, positionRef, index, 0, 1)" type="number"
                                class="input_number" name="" id="" :value="item[0][1]" step="0.0000001"
                                placeholder="请输入" />′
                            <input @blur="update1($event, positionRef, index, 0, 2)"
                                @keydown.enter="update1($event, positionRef, index, 0, 2)" type="number"
                                class="input_number" name="" id="" :value="item[0][2]" step="0.0000001"
                                placeholder="请输入" />″
                        </div>
                        <div class="content_center_dufenmiao">
                            <input @blur="update1($event, positionRef, index, 1, 0)"
                                @keydown.enter="update1($event, positionRef, index, 1, 0)" type="number"
                                class="input_number" name="" id="" :value="item[1][0]" step="0.0000001"
                                placeholder="请输入" />°
                            <input @blur="update1($event, positionRef, index, 1, 1)"
                                @keydown.enter="update1($event, positionRef, index, 1, 1)" type="number"
                                class="input_number" name="" id="" :value="item[1][1]" step="0.0000001"
                                placeholder="请输入" />″
                            <input @blur="update1($event, positionRef, index, 1, 2)"
                                @keydown.enter="update1($event, positionRef, index, 1, 2)" type="number"
                                class="input_number" name="" id="" :value="item[1][2]" step="0.0000001"
                                placeholder="请输入" />″
                        </div>
                        <div style="width: 100%;">
                            <input style="width: 100%;" type="number" class="input_number"
                                @blur="update($event, positionRef, index, 2)"
                                @keydown.enter="update($event, positionRef, index, 2)" name="" id="" :value="item[2]"
                                step="0.001" placeholder="请输入高度" />
                        </div>
                    </div>
                    <div class="content_right" @click="deleteIndexFun(index)" title="删除点"
                        @mouseenter="hoverIndex = index" @mouseleave="hoverIndex = -2">
                        <span class="td_span">
                            <es-icon :name="'shanchu_2'" :color="hoverIndex === index ? '#fff' : '#575B66'"
                                :size="13" />
                        </span>
                    </div>
                </div>
            </div>
            <div v-else-if="positionType === 'duFen'">
                <div class="list_content" v-for="(item, index) in duFenPositions" :key="index">
                    <div class="content_left ">{{ index + 1 }}</div>
                    <div class="content_center">
                        <div class="content_center_dufen">
                            <input @blur="update2($event, positionRef, index, 0, 0)"
                                @keydown.enter="update2($event, positionRef, index, 0, 0)" type="number"
                                class="input_number" name="" id="" :value="item[0][0]" step="0.0000001"
                                placeholder="请输入" />°
                            <input @blur="update2($event, positionRef, index, 0, 1)"
                                @keydown.enter="update2($event, positionRef, index, 0, 1)" type="number"
                                class="input_number" name="" id="" :value="item[0][1]" step="0.0000001"
                                placeholder="请输入" />′

                        </div>
                        <div class="content_center_dufen">
                            <input @blur="update2($event, positionRef, index, 1, 0)"
                                @keydown.enter="update2($event, positionRef, index, 1, 0)" type="number"
                                class="input_number" name="" id="" :value="item[1][0]" step="0.0000001"
                                placeholder="请输入" />°
                            <input @blur="update2($event, positionRef, index, 1, 1)"
                                @keydown.enter="update2($event, positionRef, index, 1, 1)" type="number"
                                class="input_number" name="" id="" :value="item[1][1]" step="0.0000001"
                                placeholder="请输入" />″
                        </div>
                        <div style="width: 100%;">
                            <input style="width: 100%;" type="number" class="input_number"
                                @blur="update($event, positionRef, index, 2)"
                                @keydown.enter="update($event, positionRef, index, 2)" name="" id="" :value="item[2]"
                                step="0.001" placeholder="请输入高度" />
                        </div>
                    </div>
                    <div class="content_right" @click="deleteIndexFun(index)" title="删除点"
                        @mouseenter="hoverIndex = index" @mouseleave="hoverIndex = -2">
                        <span class="td_span">
                            <es-icon :name="'shanchu_2'" :color="hoverIndex === index ? '#fff' : '#575B66'"
                                :size="13" />
                        </span>
                    </div>
                </div>
            </div>
            <div v-else>
                <div class="list_content" v-for="(item, index) in positionLocalRef" :key="index">
                    <div class="content_left">{{ index + 1 }}</div>

                    <div class="content_center">
                        <div>
                            <input type="number" class="input_number" name="" id="" :value="item[0]"
                                @blur="update($event, positionRef, index, 0)"
                                @keydown.enter="update($event, positionRef, index, 0)" step="0.0000001"
                                placeholder="请输入经度" />
                            <span style="position: absolute;right: 2px;top: 2px;">°</span>
                        </div>
                        <div>
                            <input type="number" class="input_number" name="" id="" :value="item[1]"
                                @blur="update($event, positionRef, index, 1)"
                                @keydown.enter="update($event, positionRef, index, 1)" step="0.0000001"
                                placeholder="请输入纬度" />
                            <span style="position: absolute;right: 2px;top: 2px;">°</span>
                        </div>
                        <div>
                            <input type="number" class="input_number" name="" id="" :value="item[2]"
                                @blur="update($event, positionRef, index, 2)"
                                @keydown.enter="update($event, positionRef, index, 2)" step="0.001"
                                placeholder="请输入高度" />
                        </div>
                    </div>
                    <div class="content_right" @click="deleteIndexFun(index)" title="删除点"
                        @mouseenter="hoverIndex = index" @mouseleave="hoverIndex = -2">
                        <span class="td_span">
                            <es-icon :name="'shanchu_2'" :color="hoverIndex === index ? '#fff' : '#575B66'"
                                :size="13" />
                        </span>
                    </div>
                </div>
            </div>

        </div>
    </div>
</template>


<script setup lang="ts">
import { onBeforeUnmount, ref, watch } from "vue";
import { createVueDisposer, toReadonlyVueRef, toVR } from 'vue-xe2-plugin/dist-node/components/xe2/tools';
import { messageBox } from "earthsdk-ui";
import { doToDoFenMiao, duToDoFen, duFenMiaoToDu, duFenToDo } from "./base/duTransform"
type Positions = [number, number, number][]
type PositionsStr = [string, string, string][]
type duFenMiaoStr = [[number, number, number], [number, number, number], number][]
type duFenStr = [[number, number], [number, number], number][]
const props = withDefaults(defineProps<{ property: any, type: string, positionType?: string }>(), { positionType: '' })// 'duFenMiao' ||'duFen'
const { property, positionType } = props
const readonly = property.readonly
const disposer = createVueDisposer(onBeforeUnmount)
const positionRef = readonly ? toReadonlyVueRef<Positions | undefined>(disposer, property.reactVar, s => s && ([...s] as Positions)) : toVR<Positions | undefined>(disposer, property.reactVar, s => s && ([...s] as Positions))
const positionLocalRef = ref<Positions | undefined>([])
const duFenMiaoPositions = ref<duFenMiaoStr>([])
const duFenPositions = ref<duFenStr>([])
const numTraStr = (numArr: Positions) => {
    if (!numArr) return
    let a: Positions = []
    numArr.forEach(() => {
        a.push([0, 0, 0])
    })
    numArr.forEach((item, index) => {
        item.forEach((it, ind) => {
            if (ind === 2) {
                a[index][ind] = (Number(it.toFixed(3)))
            } else {
                a[index][ind] = (Number(it.toFixed(7)))
            }
        })
    })
    return a
}
watch(positionRef, (val) => {
    if (!val) return
    if (positionType === 'duFenMiao') {
        let a: any = []
        val.forEach(item => {
            a.push([doToDoFenMiao(item[0]), doToDoFenMiao(item[1]), Number(item[2].toFixed(3))])
        })
        duFenMiaoPositions.value = a
    } else if (positionType === 'duFen') {
        let a: any = []
        val.forEach(item => {
            a.push([duToDoFen(item[0]), duToDoFen(item[1]), Number(item[2].toFixed(3))])
        })
        duFenPositions.value = a
    } else {
        // positionLocalRef.value = numTraStr(val)

        if (props.type === 'ESPath' || props.type === 'ESGeoLineString') {
            positionLocalRef.value = numTraStr(val)
        } else if (props.type === 'ESGeoRectangle') {
            if (positionRef.value && val.length === 1) {
                positionRef.value.splice(0, 2)
            }
            positionLocalRef.value = numTraStr(val)
        }
        else {
            if (positionRef.value && val.length === 2) {
                positionRef.value.splice(0, 2)
            }
            positionLocalRef.value = numTraStr(val)
        }
    }

}, { immediate: true })

const update = (e: any, position: Positions | undefined, index: number, ind: number) => {
    if (position === undefined) return
    let numberArr = JSON.parse(JSON.stringify(position))
    numberArr[index][ind] = Number(e.target.value)
    positionRef.value = numberArr
}
const update1 = (e: any, position: Positions | undefined, index: number, ind: number, duIndex: number) => {
    if (position === undefined) return
    let numberArr = JSON.parse(JSON.stringify(position))
    //@ts-ignore
    const du = [...(duFenMiaoPositions.value[index][ind])] as [number, number, number]
    du[duIndex] = Number(e.target.value)
    const a = duFenMiaoToDu(du)
    numberArr[index][ind] = a
    positionRef.value = numberArr
}
const update2 = (e: any, position: Positions | undefined, index: number, ind: number, duIndex: number) => {
    if (position === undefined) return
    let numberArr = JSON.parse(JSON.stringify(position))
    //@ts-ignore
    const du = [...(duFenPositions.value[index][ind])] as [number, number]
    du[duIndex] = Number(e.target.value)
    const a = duFenToDo(du)
    numberArr[index][ind] = a
    positionRef.value = numberArr
}
const addPosition = () => {
    if (!positionRef.value) return
    if (positionRef.value.length === 0) return
    if (props.type === 'ESGeoRectangle') return
    const a = positionRef.value[positionRef.value.length - 1]
    positionRef.value.push(a)
}
const deletePosition = (index: number) => {
    if (!positionRef.value) return
    positionRef.value.splice(index, 1)
}

const deleteIndexFun = (index: number) => {
    messageBox({ text: '确认删除这个位置点' })
        .then(() => {
            deletePosition(index)
        })
        .catch((err) => {
        })
}
const hoverIndex = ref(-2)
</script>

<style scoped>
.points {
    width: 100%;
}

.points_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    color: rgba(230, 230, 230, 1);
    cursor: pointer;
    margin-bottom: 5px;
}

.points_list {
    width: 100%;
    color: rgba(230, 230, 230, 1);

}

.list_top {
    width: 100%;
    height: 22px;
    background-color: rgba(28, 28, 29, 0.6);
    border-radius: 4px;
    padding-left: 15px;
    line-height: 22px;
    box-sizing: border-box;
}

.list_content {
    width: 100%;
    height: 80px;
    display: flex;
    border-bottom: 1px solid #111111;
}

.content_left {
    width: 70px;
    text-align: center;
    line-height: 80px;
}

.content_center {
    flex: 1;
    display: flex;
    flex-direction: column;
    text-align: center;
    justify-content: space-around;
}

.content_center>div {
    position: relative;
}

.content_center_dufenmiao,
.content_center_dufen {
    width: 100%;
    display: flex;
    justify-content: space-between;
}

.content_center_dufenmiao>input {
    display: inline-block;
    width: 32%;
}

.content_center_dufen>input {
    display: inline-block;
    width: 44%;
}

.content_right {
    width: 30px;
    cursor: pointer;
}


input {
    width: 100%;
    border: 1px solid #3B3C40;
    outline: none;
    background: rgba(28, 28, 29, 0.6);
    color: rgba(230, 230, 230, 1);
    border-radius: 4px;
}

input:hover {
    border: 1px solid #2c68f7;
}

input:focus {
    border: 1px solid #2c68f7;
}

.td_span {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: flex-end;

}

.input_number::-webkit-outer-spin-button,
.input_number::-webkit-inner-spin-button {
    -webkit-appearance: none;
}

.input_number[type="number"] {
    -moz-appearance: textfield;
}
</style>
